<template>
	<view class="goods-container">
		<view class="button-group">
			<view class="button back" @click="back">返回首页</view>
			<view class="button add" @click="add">添加商品</view>
			<view class="button save" @click="save">保存商品</view>
		</view>
		<view v-for="(item,index) in goods" :key="index" class="item">
			<view class="insert-goods">
				<uni-icons type="plus-filled" size="25" color="#ff5500" @click="insert(index)"></uni-icons>
			</view>
			名称：<input type="text" v-model="item.name" :maxlength="10" class="name">
			价格：<input type="number" v-model="item.money" :maxlength="10" class="money">
			<view class="bottom-icon">
				<uni-icons type="pulldown" size="30" color="#4993dd" v-if="index !== goods.length - 1"
					@click="move(index,1)">
				</uni-icons>
				<uni-icons type="pulldown" size="30" class="reverse" color="#4993dd" v-if="index !== 0"
					@click="move(index,-1)">
				</uni-icons>
				<uni-icons type="closeempty" size="30" color="#ff5500" @click="close(index)">
				</uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				saveStatus: false,
				goods: []
			}
		},
		onLoad() {
			this.initGoods()
		},
		// 自定义返回
		onBackPress() {
			// if (this.saveStatus) {
			// 	return false;
			// } else {
			// 	this.save()
			// 	return true;
			// }
		},
		methods: {
			// 初始化商品
			initGoods() {
				this.goods = JSON.parse(this.$common.getStorage('goods', JSON.stringify([])))
			},
			// 返回上一页
			back() {
				uni.navigateBack()
			},
			// 添加商品
			add() {
				this.goods = this.goods.concat({
					name: "",
					money: 0
				})

				// 移动可视区域到底部
				this.$nextTick(() => {
					document.getElementsByClassName('goods-container')[0].scrollIntoView({
						behavior: 'smooth',
						block: 'end'
					})
				})
			},
			//保存商品信息
			save() {
				if (this.goods.length === 0) {
					uni.showToast({
						title: "无商品信息！无法保存！",
						icon: "none"
					})
				} else {
					uni.setStorageSync('goods', JSON.stringify(this.goods))
					this.saveStatus = true
					uni.showToast({
						title: "保存成功~",
					})
					setTimeout(() => {
						this.back()
					}, 2000)
				}
			},
			// 移动商品   offset: -1向上移动  +1向下移动
			move(index, offset) {
				this.goods.splice(index + (offset), 0, this.goods.splice(index, 1)[0])
				console.log(this.goods)
			},
			// 删除商品
			close(index) {
				uni.showModal({
					'title': "提示",
					'content': "是否删除" + (this.goods[index].name) + "?",
					success: (res) => {
						if (res.confirm) {
							this.goods.splice(index, 1)
							uni.showToast({
								'title': "删除成功~~"
							})
						}
					}
				})
			},
			// 插入商品
			insert(index) {
				this.goods.splice(index, 0, {
					name: "",
					money: 0
				})
			}
		}
	}
</script>

<style>
	.goods-container {
		width: 100%;
	}

	.button-group {
		display: flex;
		position: sticky;
		top: 0px;
		background-color: white;
		padding-top: 10px;
		z-index: 10;
		border-bottom: 1px solid #007AFF;
	}

	.button-group view {
		width: 25%;
	}

	.back {
		margin: 0 auto;
		width: 50%;
		text-align: center;
		border-radius: 20px;
		margin-bottom: 10px;
		background-color: #333333;
	}

	.add {
		margin: 0 auto;
		width: 50%;
		text-align: center;
		border-radius: 20px;
		margin-bottom: 10px;
		background-color: #aa5500;
	}

	.save {
		margin: 0 auto;
		width: 50%;
		text-align: center;
		border-radius: 20px;
		margin-bottom: 10px;
		background-color: #005500;
	}

	.item {
		display: flex;
		justify-content: center;
		padding: 10px;
		font-size: 18px;
		align-items: center;
	}

	.item input {
		border: 1px solid #333333;
		box-sizing: border-box;
	}

	.name {
		margin-right: 20px;
	}

	.bottom-icon {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 70px;
		margin-left: 10px;
	}

	.reverse {
		transform: rotate(0.5turn);
	}

	.insert-goods {
		margin-right: 10px;
	}

	@media all and (max-width: 700px) {
		.item {
			display: block;
			width: 70%;
			max-width: 350px;
			min-width: 200px;
			margin: 0 auto;
		}

		.bottom-icon {
			width: 100%;
			margin-left: 0px;
		}

		.name {
			margin-right: 0px;
		}

		.insert-goods {
			text-align: center;
			margin: 0;
		}
	}
</style>
